<template>
  <div class="Column">
    <div id="main1">1</div>
    <div id="main2">2</div>
    <div id="main3">3</div>
    <div id="main4">4</div>
    <div id="main5">5</div>
    <div id="main6">6</div>
  </div>
</template>

<script>

import {nextTick, onBeforeMount, onBeforeUnmount} from "vue"
import * as echarts from 'echarts';
import axios from "axios"

export default {
  name: "Column",
  setup() {
    let myChart1, myChart2, myChart3, myChart4, myChart5, myChart6;
    onBeforeUnmount(() => {
      myChart1.dispose();
      myChart2.dispose();
      myChart3.dispose();
      myChart4.dispose();
      myChart5.dispose();
      myChart6.dispose();
    })

    nextTick(() => {
      // echarts.init(null)
      chart1();
      chart2();
      chart3();
      chart4();
      chart5();
      chart6();
    })

    function chart1() {
      myChart1 = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart1.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      })
    }

    function chart2() {
      myChart2 = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart2.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              {
                value: 123,
                itemStyle: {
                  color: '#E91E63'
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: '#9C27B0'
                }
              },
              {
                value: 150,
                itemStyle: {
                  color: '#FFEB3B'
                }
              },
              {
                value: 100,
                itemStyle: {
                  color: '#2196F3'
                }
              },
              {
                value: 70,
                itemStyle: {
                  color: '#00BCD4'
                }
              },
              {
                value: 80,
                itemStyle: {
                  color: '#009688'
                }
              },
              {
                value: 130,
                itemStyle: {
                  color: '#FFC107'
                }
              }
            ],
            type: 'bar'
          }
        ]
      })
    }

    function chart3() {
      myChart3 = echarts.init(document.getElementById('main3'));
      // 绘制图表
      myChart3.setOption({
        title: {
          text: 'World Population'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      })
    }

    function chart4() {
      myChart4 = echarts.init(document.getElementById('main4'));
      let option;
      // 绘制图表
      myChart4.showLoading();
      axios.get('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/obama_budget_proposal_2012.list.json').then((res) => {
        myChart4.hideLoading();
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          legend: {
            data: ['Growth', 'Budget 2011', 'Budget 2012'],
            itemGap: 5
          },
          grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.names
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'Budget (million USD)',
              axisLabel: {
                formatter: function (a) {
                  a = +a;
                  return isFinite(a) ? echarts.format.addCommas(+a / 1000) : '';
                }
              }
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 94,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
          series: [
            {
              name: 'Budget 2011',
              type: 'bar',
              data: res.data.budget2011List
            },
            {
              name: 'Budget 2012',
              type: 'bar',
              data: res.data.budget2012List
            }
          ]
        };
        myChart4.setOption(option);
      }, (error) => {

      });
    }

    function chart5() {
      myChart5 = echarts.init(document.getElementById('main5'));
      // 绘制图表
      myChart5.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      })
    }

    function chart6() {
      myChart6 = echarts.init(document.getElementById('main6'));
      let option;
      // prettier-ignore
      let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
      // prettier-ignore
      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      option = {
        title: {
          text: '特性示例：渐变色 阴影 点击缩放',
          subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#2378f7'},
                  {offset: 0.7, color: '#2378f7'},
                  {offset: 1, color: '#83bff6'}
                ])
              }
            },
            data: data
          }
        ]
      };
      const zoomSize = 6;
      // 绘制图表
      myChart6.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart6.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
              dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      }).setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.Column {
  height: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 20px;
  background: #fff;

  > div {
    //background-color: #42b983;
    display: flex;
    border: 1px #eee solid;
    color: #fff;
    justify-content: center;
    align-items: center;
  }
}
</style>